<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="pager"></div>
  <script>
    function renderPages(totalpage, page = 1){
      var temp = '';
      temp += `<button
      onclick = "renderPages(${totalpage},${page-1})"
      ${page===1?'disabled':''}
      >&lt;</button>`;
      for(var p = 1; p < totalpage; p++){
        temp += `<button 
        style = "color:${p === page ? 'red':''}"
        onclick = "renderPages(${totalpage}, ${p})"
        >${p}</button>`;
      }
      temp += `<button
      onclick = "renderPages(${totalpage},${page+1})"
      ${page===totalpage?'disabled':''}
      >&gt;</button>`;
      document.getElementById('pager').innerHTML = temp
    }
    renderPages(10,5);
  </script>
</body>
</html>